<template>
  <div class="table_card">
    <div class="table_card_top form_style">
      <span class="solid_left"></span>
      <div class="table_card_title">新建项目</div>
      <div class="op_right">
        <!-- <button class="New_source" @click="NewSource">新增来源</button> -->
      </div>
    </div>
    <div class="client_Form">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-position="top">
        <div>
          <div>
            <el-row :gutter="137">
              <el-col :span="8"
                ><el-form-item label="项目名称" prop="itemName">
                  <el-input
                    v-model.trim="form.itemName"
                    placeholder="请填写项目名称"
                    maxlength="20"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <div class="box">
                  <el-form-item label="项目分类" prop="typeId">
                    <div>
                      <el-select
                        class="w-100 selsectbox"
                        v-model.trim="form.typeId"
                        placeholder="请选择项目分类"
                      >
                        <el-option
                          v-for="item in ProjectSortOptions"
                          :key="item.typeId"
                          :label="item.typeName"
                          :value="item.typeId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="8"
                ><el-form-item label="排序" prop="reorder">
                  <el-input-number
                    v-model.trim="form.reorder"
                    placeholder="请填写排序"
                    :min="0"
                    :step="1"
                    :precision="0"
                    :controls="false"
                    class="w-100 text-left"
                  ></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="8"
                ><el-form-item label="服务时长(分钟)" prop="itemDuration">
                  <el-input-number
                    placeholder="请输入服务时长(分钟)"
                    v-model="form.itemDuration"
                    :precision="0"
                    :controls="false"
                    :min="0"
                    class="w-100 text-left"
                  ></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="8"
                ><el-form-item label="项目价格" prop="itemPrice">
                  <el-input-number
                    v-model="form.itemPrice"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    :controls="false"
                    class="w-100 text-left"
                  ></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="8"
                ><div>
                  <el-form-item label="项目门店分类" prop="itemStoreTypeId">
                    <div>
                      <el-select
                        class="w-100 selsectbox"
                        v-model="form.itemStoreTypeId"
                        placeholder="请选择项目门店分类"
                      >
                        <el-option
                          v-for="item in ProjectStoreSortOptions"
                          :key="item.itemStoreTypeId"
                          :label="item.typeName"
                          :value="item.itemStoreTypeId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="8"
                ><div>
                  <el-form-item label="计算手工" prop="itemStoreTypeId">
                    <div>
                      <el-radio v-model="form.hardStatus" label="Y"
                        >计算</el-radio
                      >
                      <el-radio v-model="form.hardStatus" label="N"
                        >不计算</el-radio
                      >
                    </div>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="12"
                ><div>
                  <el-form-item label="小程序显示状态" prop="appletStatus">
                    <div>
                      <el-select
                        class="w-200 selsectbox"
                        v-model="form.appletStatus"
                        placeholder="请选择小程序显示状态"
                      >
                        <el-option
                          v-for="item in appletStatusOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="8"
                ><div>
                  <el-form-item label="提成类型" prop="awardType">
                    <div>
                      <el-radio v-model="form.awardType" label="P"
                        >百分比</el-radio
                      >
                      <el-radio v-model="form.awardType" label="M"
                        >固定金额</el-radio
                      >
                    </div>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="12"
                >
                <div style="height:104px; max-width:210px">

                
                <el-form-item
                  label="提成值"
                  prop="awardVal"
                  v-show="form.awardType === 'P'"
                >
                  <el-input-number
                    placeholder="请输入"
                    v-model="form.awardVal"
                    :precision="0"
                    :controls="false"
                    :min="0"
                    class="w-100 text-left"
                  ></el-input-number>
                  <span class="percentIcon">%</span>
                </el-form-item>
            <el-form-item
                  label="提成值"
                  prop="awardVal"
                  v-show="form.awardType === 'M'"
                >
                  <el-input-number
                    placeholder="请输入"
                    v-model="form.awardVal"
                    :precision="0"
                    :controls="false"
                    :min="0"
                    class="w-100 text-left"
                  ></el-input-number>
                </el-form-item>
              </div>
              
              </el-col>

              <el-col :span="8"
                ><el-form-item label="头图图片" prop="faceImage">
                  <div class="up-form-lab">
                    <div>
                      <up-files
                        :accept="'png,jpg,jpeg'"
                        :size="1"
                        v-model="form.faceImage"
                        @change="changeFile('faceImage')"
                      >
                      </up-files>
                    </div>
                  </div>

                  <div class="upfile-text">
                    <div>上传与项目相关的高清图片</div>
                    <div>
                      支持jpg、jpeg、png、gif，建议尺寸XXX*XXX，单个照片最大2MB，最多上传3张
                    </div>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="8"
                ><el-form-item label="轮播图" prop="itemImageList">
                  <div class="up-form-lab">
                    <div>
                      <up-files
                        :accept="'png,jpg,jpeg'"
                        :size="5"
                        v-model.trim="form.itemImageList"
                        @change="changeFile('itemImageList')"
                      >
                      </up-files>
                    </div>
                  </div>

                  <div class="upfile-text">
                    <div>上传与项目相关的高清图片</div>
                    <div>
                      支持jpg、jpeg、png、gif，建议尺寸XXX*XXX，单个照片最大2MB，最多上传3张
                    </div>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24"
                ><el-form-item label="项目描述" prop="itemExplain">
                  <editor v-model="form.itemExplain" :min-height="192" />

                  <!-- <el-input
                    :rows="6"
                    type="textarea"
                    v-model.trim=""
                    placeholder="请填写来源备注"
                  ></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 应用门店-->

        <div class="text-center pt-10">
          <el-button
            size="small"
            :loading="loading"
            type="primary"
            @click="submitForm('ruleForm')"
            >发布项目</el-button
          >
        </div>

        <!-- <eryu-bottom>
          <el-button
            size="small"
            :loading="loading"
            type="primary"
            @click="submitForm('ruleForm')"
            >保存</el-button
          >
        </eryu-bottom> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import UpFiles from "@/components/UpFiles";
import { getSuccessFile, formatFile } from "@/utils/index";
import { CreateProject, UpdateProject } from "@/api/business/project";
import Editor from "@/components/Editor";
import {
  getProjectSortPage,
  getProject,
  getProjectStoreSortlistAll,
} from "@/api/business/project";

import IndexVue from "../../../components/parser/example/Index.vue";

// import sortDialog from "../com/sortDialog.vue";
import stores from "@/components/Stores/index";
export default {
  name: "merchantadd",
  components: { UpFiles, stores, Editor },
  computed: {},
  data() {
    return {
      byLoading: false,
      loading: false,
      title: "",
      qid: "",
      ProjectSortOptions: [],

      ProjectStoreSortOptions: [], // 项目门店分类
      ProjectStoreSortObj: {},

      form: {
        itemName: "",
        typeId: undefined,
        itemPrice: 0,
        typeName: "",
        itemStoreTypeId: "",
        lineationAmount: 0,
        itemDuration: 0,
        reorder: "",
        itemExplain: "",
        // sellStatus:"",  // 销售状态（0-销售中，1-已下架）
        hardStatus: "Y", // 计算手工
        appletStatus: "",
        faceImage: [],
        itemImageList: [],
        storeList: [],
        awardType: "P", // 提成类型 (P:百分比;M:固定金額)")
        awardVal: "", // 提成值
      },
      // 查询参数
      queryParams: {
        // pageNo: 1,
        // pageSize: 10,
      },

      appletStatusOptions: [
        {
          value: "Y",
          label: "显示",
        },
        {
          value: "N",
          label: "不显示",
        },
      ],

      rules: {
        itemName: [
          { required: true, message: "请输入项目名称", trigger: "change" },
          { max: 99, message: "长度在最多99个字符", trigger: "change" },
        ],

        typeId: [
          { required: true, message: "请选择项目分类", trigger: "change" },
        ],

        itemPrice: [
          { required: true, message: "请输入项目价格", trigger: "change" },
        ],

        itemStoreTypeId: [
          { required: true, message: "请选择项目门店分类", trigger: "change" },
        ],

        appletStatus: [
          {
            required: true,
            message: "请选择小程序显示状态",
            trigger: "change",
          },
        ],

        itemDuration: [
          { required: true, message: "请输入服务时长", trigger: "change" },
        ],

        itemExplain: [
          { required: true, message: "请输入项目描述", trigger: "change" },
        ],
        reorder: [
          { required: true, message: "请输入排序号", trigger: "change" },
        ],

        hardStatus: [
          { required: true, message: "请选择计算手工", trigger: "change" },
        ],

        faceImage: [
          {
            min: 1,
            required: true,
            type: "array",
            message: "请上传项目头图",
            trigger: "change",
          },
        ],

        itemImageList: [
          {
            min: 1,
            required: true,
            type: "array",
            message: "请上传详情图片",
            trigger: "change",
          },
        ],
      },
    };
  },

  created() {
    const { query } = this.$route;
    console.log(query);
    if (query.id) {
      this.qid = query.id;
      this.getInit(query.id);
    }
    this.getList();
    this.getStoreSortList();
  },
  mounted() {},

  destroyed() {},

  methods: {
    // 项目门店分类
    getStoreSortList() {
      this.loading = true;
      getProjectStoreSortlistAll({})
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ProjectStoreSortOptions = data;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 项目分类
    getList() {
      this.loading = true;
      getProjectSortPage(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ProjectSortOptions = data;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    clikApplyStore() {
      this.$nextTick(() => {
        this.$refs.stores.applyStore(this.form.storeList);
        this.$refs.stores.getStoresList(); // 调用子组件的方法
      });
    },

    getInit(id) {
      this.byLoading = true;
      getProject({
        id: id,
      })
        .then((response) => {
          this.byLoading = false;
          const { code, data } = response;
          let {
            itemName,
            typeId,
            reorder,
            itemDuration,
            itemPrice,
            itemStoreTypeId,
            lineationAmount,
            itemExplain,
            faceImage,
            hardStatus,
            appletStatus,
            awardType,
            awardVal,
            itemImageList,
            storeIds,
          } = data;

          this.form = {
            itemName,
            typeId,
            reorder,
            itemDuration,
            itemPrice,
            itemStoreTypeId,
            lineationAmount,
            itemExplain,
            storeIds,
            hardStatus,
            appletStatus,
            awardType,
            awardVal,
            faceImage: !!faceImage ? JSON.parse(faceImage) : [],
            itemImageList: !!itemImageList ? JSON.parse(itemImageList) : [],
          };
        })
        .catch((e) => {
          this.byLoading = false;
        });
    },

    changeFile(name) {
      this.$refs["ruleForm"].validateField(name);
    },

    submitForm(formName) {
      if (this.loading) {
        return false;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.postRequest();
        } else {
          //  console.log("error submit!!");
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    postRequest() {
      let formData = JSON.parse(JSON.stringify(this.form));
      // 头图
      formData.faceImage = getSuccessFile(formData.faceImage, 0);
      formData.faceImage = JSON.stringify(formData.faceImage);
      formData.itemImageList = getSuccessFile(formData.itemImageList, 1);
      formData.itemImageList = JSON.stringify(formData.itemImageList);

      if (!this.qid) {
        this.loading = true;
        CreateProject(formData)
          .then((response) => {
            this.loading = false;
            const { code, data, msg } = response;
            if (code === 0) {
              this.$router.go(-1);
              this.$message({
                message: "操作成功",
                type: "success",
              });
            }
          })
          .catch((e) => {
            this.loading = false;
          });
      } else {
        this.loading = true;
        formData.itemId = this.qid;
        // formData.itemName = scope.row.itemName;
        // formData.typeId = scope.row.typeId;
        // formData.reorder = scope.row.reorder;
        // formData.itemDuration = scope.row.itemDuration;
        UpdateProject(formData)
          .then((response) => {
            this.loading = false;
            const { code, data, msg } = response;
            if (code === 0) {
              this.$router.go(-1);
              this.$message({
                message: "操作成功",
                type: "success",
              });
            }
          })
          .catch((e) => {
            this.loading = false;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sl {
  width: 200px;
  height: 102px;
  background: #fbfbfb;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  text-align: center;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 160px;
  svg-icon {
    height: 0.56em;
  }
}

.box {
  position: relative;
  width: 100%;
  .sort-btn {
    position: absolute;
    left: 300px;
    top: 0px;
  }
  .el-button--small {
    padding: 11px 29px;
    border-radius: 4px;
  }
}

// 改变select下拉框的高度样式
::v-deep .selsectbox .el-input--small .el-input__inner {
  height: 35px;
  border-radius: 5px;
}
::v-deep .selsectbox .el-input--small input::-webkit-input-placeholder {
  font-size: 13px;
  font-weight: 200;
}

.pt-10 {
  padding-top: 10px;
}

.upfile-text {
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 1.5em;
  padding-top: 8px;
}

.eryu-up-item {
  padding-left: 0px !important;
}

.awardTypeBox {
  display: flex;
}

.percentIcon {
  position: absolute;
}
</style>
